<template>
  <div @click="go">
    <!-- 上一页 -->
    <button
      class="prev"
      go="-1"
      :disabled="currentNo === 1"
      :class="{ disabled: currentNo === 1 }"
    ></button>
    <!-- 第一页 -->
    <button v-show="startEnd.start >= 2" :go="1">1</button>
    <!-- 省略号 -->
    <span v-show="startEnd.start >= 3" class="elli">...</span>
    <!-- 中间连续页码 -->
    <button
      v-for="(item, index) in startEnd.end"
      v-show="item >= startEnd.start"
      :key="index"
      :go="item"
      :class="{ checked: item === currentNo }"
    >
      {{ item }}
    </button>
    <!-- 省略号 -->
    <span v-show="startEnd.end <= totalPages - 2" class="elli">...</span>
    <!-- 最后一页 -->
    <button v-show="startEnd.end < totalPages" :go="totalPages">
      {{ totalPages }}
    </button>
    <!-- 下一页 -->
    <button
      class="next"
      :disabled="currentNo === totalPages"
      :class="{ disabled: currentNo === totalPages }"
      go="+1"
    ></button>
    <!-- <span>当前页码：{{ currentNo }}</span> -->
  </div>
</template>

<script name="ItPagination" setup>
import { computed, onMounted, ref, watch } from 'vue'

const props = defineProps({
  // 当前页
  current: {
    type: String,
    default: '',
  },
  // 总页数
  total: {
    type: Number,
    default: 0,
  },
  // 中间连续页码
  continues: {
    type: Number,
    default: 5,
  },
})

// 总页数
const totalPages = computed(
  () =>
    // Math.ceil(props.totalItems / props.pageItems)
    props.total
)

// 当前页码
// let currentNo = ref(totalPages.value > 0 ? 1 : 0);
let currentNo = ref(Number(props.current))
watch(
  () => props.current,
  (newValue, oldValue) => {
    currentNo.value = Number(newValue)
  }
)
// 计算中间连续页码的开始、结束位置
let startEnd = computed(() => {
  let start = 0,
    end = 0
  // 总页数不够，那么就不存在中间连续页码的问题了
  if (totalPages.value < props.continues) {
    start = 1
    end = totalPages.value
  } else {
    // 连续页码数量的一半
    const dx = Math.floor(props.continues / 2)
    start = currentNo.value - dx
    end = currentNo.value + dx
    // 判断边界（假如有20页）
    if (start < 1) {
      start = 1
      // 1 2 3 4 5 ... 20
      end = props.continues
    }
    if (end > totalPages.value) {
      end = totalPages.value
      // 1 ... 16 17 18 19 20
      start = totalPages.value - props.continues + 1
    }
  }
  return { start, end }
})

onMounted(() => {
  // console.log(totalPages.value)
  // console.log(startEnd.value.start)
  // console.log(currentNo.value)
})

/**
 * 跳转页面
 */
const emits = defineEmits(['onChange'])

function go(e) {
  const target = e.target || e.srcElement
  if (target.nodeName.toLowerCase() === 'button') {
    const goIndex = target.getAttribute('go')
    // 上一页、下一页
    if (['-1', '+1'].includes(goIndex)) {
      currentNo.value = goIndex - 0 + currentNo.value
      if (currentNo.value < 1) currentNo.value = 1
      if (currentNo.value > totalPages.value) currentNo.value = totalPages.value
    } else {
      currentNo.value = goIndex - '0'
    }

    emits('onChange', currentNo.value)
  }
}
</script>

<style scoped>
button {
  height: 30px;
  border-radius: 4px;
  border: 1px solid #e2e2e2;
  line-height: 30px;
  display: inline-block;
  padding: 0 12px;
  font-size: 16px;
  color: #999999;
  cursor: pointer;
  vertical-align: top;
}

button:not(:last-of-type) {
  margin-right: 14px;
}

/* button:hover {
  border: 1px solid #ddd;
} */
.prev,
.next {
  position: relative;
  width: 30px;
  height: 30px;
}

.prev::after {
  content: '';
  height: 8px;
  width: 8px;
  top: 9.6px;
  left: 11.52px;
  border-width: 0 0 2px 2px;
  border-color: #999;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
}
.next::after {
  content: '';
  height: 8px;
  width: 8px;
  top: 9.6px;
  left: 7.68px;
  border-width: 2px 2px 0 0;
  border-color: #999;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
}

.checked {
  background-color: royalblue;
  color: #fff;
}
/* .checked:hover {
  border: none;
} */
.disabled {
  color: #aaa;
  cursor: not-allowed;
}
/* .disabled:hover {
  border: none;
} */
.elli {
  margin-right: 10px;
  color: #aaa;
  cursor: default;
}
</style>
